import logo from './logo.svg';
import './App.css';
import React, { Component,useState } from 'react';
import {CSSTransition} from 'react-transition-group'



function Comp1({visible}) {
  return <CSSTransition appear mountOnEnter in={visible} timeout={1000}>
  <h1 className="title">組件1</h1>
  </CSSTransition> 

}
function Comp2({visible}) {
  return  <CSSTransition mountOnEnter in={visible} timeout={1000}>
  <h1 className="title">組件2</h1>
  </CSSTransition> 
}

function App() {
  const [showComp1, setshowComp1] = useState(true);
  return (
    <div className="container">
      <div className="compContainer">
      <Comp1 visible={showComp1} />
      <Comp2 visible={!showComp1} />

      </div>
     
      <button onClick={()=>{
        setshowComp1(!showComp1)
      }}>切换显示状态 </button>

    </div>
   
  );
  
  
}

export default App;
